<template>
  <div class="app-container">
    <div class="topBox flex-l">
      <div class="progressBar">
        <!-- <img src="@/assets/images/nengliang.webp" alt=""> -->
        <img class="bac2" src="@/assets/images/nengliangtiao_2.png" alt="">
        <div class="progress" :style="{width:progressWidth()}"></div>
        <!-- <div class="progress"></div> -->
        <span class="number">{{actualCal}}</span>
      </div>
      <div class="tips">能量槽满888抽盲盒大奖！</div>
    </div>
    <div class="board left-board">
      <div class="board-header flex-b">
        <div class="board-header-title">排行榜(卡路里)</div>
        <img class="board-header-arrow" src="@/assets/images/arrow.png" alt="">
      </div>
      <div class="board-bar">
        <div class="board-bar-item flex-b" v-for="(item,index) in calList" :index="index" :key="index">
          <div class="left flex-c">
            <div class="rankNo">
              <img v-if="index===0" class="medal" src="@/assets/images/medal_1.png" alt="">
              <img v-else-if="index===1" class="medal" src="@/assets/images/medal_2.png" alt="">
              <img v-else-if="index===2" class="medal" src="@/assets/images/medal_3.png" alt="">
              <div v-else>{{index+1}}</div>
            </div>
            <img class="headImgUrl" :src="item.headImgUrl" :class="{'active1':index==0,'active2':index==1 ,'active3':index==2 }" alt="">
            <div class="nickname ellipsis1">{{item.nickname}}</div>
          </div>
          <div class="right">
            <div class="number">{{Math.floor((item.cal/1000) * 10) / 10}}</div>
            <div class="unit">kcal</div>
          </div>
        </div>
      </div>
    </div>
    <div class="videoBox">
      <video class="videoPlayer" ref="videoPlayer" :src="videoSrc" loop preload="auto" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" controls disablePictureInPicture="true" controlslist="nodownload noremoteplayback noplaybackrate" autoplay @play="videoPlaying = true" @pause="videoPlaying = false">您的浏览器不支持 video 标签。</video>
      <div class="buttons flex-c" v-show="!videoPlaying">
        <div class="btn online-btn" @click="playOnlineVideo()">在线播放</div>
        <input ref="fileInput" class="btn file-btn" type="file">
        <div class="btn" style="background:#F56C6C;margin-left:10px" @click="butClick()">{{btnContent}}</div>
      </div>
    </div>
    <div class="board right-board">
      <div class="board-header flex-b">
        <div class="board-header-title">排行榜(骑行吧运动天数)</div>
        <img class="board-header-arrow" src="@/assets/images/arrow.png" alt="">
      </div>
      <div class="board-bar">
        <div class="board-bar-item flex-b" v-for="(item,index) in rideDaysList" :key="index" :index="index">
          <div class="left flex-c">
            <div class="rankNo">
              <img v-if="index===0" class="medal" src="@/assets/images/medal_1.png" alt="">
              <img v-else-if="index===1" class="medal" src="@/assets/images/medal_2.png" alt="">
              <img v-else-if="index===2" class="medal" src="@/assets/images/medal_3.png" alt="">
              <div v-else>{{index+1}}</div>
            </div>
            <img class="headImgUrl" :src="item.headImgUrl" :class="{'active1':index==0,'active2':index==1 ,'active3':index==2 }" alt="">
            <div class="nickname ellipsis1">{{item.nickname}}</div>
          </div>
          <div class="right">
            <div class="number">{{item.days}}</div>
            <div class="unit">天</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottomBox flex-l">
      <div class="QRBox">
        <img class="icon" src="@/assets/images/scanRideBar.png" alt="">
        <div>扫码了解详情</div>
      </div>
      <div class="scroll-container">
        <div class="text-scroll">{{scrollMsg}}</div>
      </div>
    </div>
    <div class="blindBox" v-if="showBox">
      <img class="box" v-show="showBox1" src="@/assets/images/nengliang.webp" alt="">
      <img class="QR" v-show="!showBox1" :src="qrCodeUrl" alt="">
      <div class="tips">{{`恭喜${nickname}获得一次抽奖机会`}}</div>
    </div>
  </div>
</template>

<script>
import { getCalRankingV2, rankingRideDays, listScrollMessage, getTotalCal, getBlindBoxUser, uploadNotice } from '@/api/api'
import QRCode from 'qrcode'
export default {
  name: 'IndexView',
  data() {
    return {
      videoSrc: '',
      calList: [
        // {
        //   cal: 92100692.19652,
        //   headImgUrl: require("../assets/logo.png"),
        //   nickname: "周健素123dfdf"
        // },
      ],
      rideDaysList: [
        // {
        //   days: 100,
        //   headImgUrl: require("../assets/logo.png"),
        //   nickname: "周健素周健素周健素周健素"
        // }
      ],
      videoPlaying: false, // 视频是否在播放的标志
      timer: null,
      timer2: null,
      rideBarMsgId: '',
      scrollMsg: '',
      actualCal: '',// 实际累计卡路里
      nickname: '',
      qrCodeUrl: '',
      showBox: false,
      showBox1: false,
      btnContent: '全屏显示',
      type: false
    }
  },
  created() {
    if(require('@/assets/videoFile.mp4')){
      this.videoSrc=require('@/assets/videoFile.mp4')
    }else{
      this.videoSrc='https://outin-232cff79690f11ec88c700163e1c8dba.oss-cn-shanghai.aliyuncs.com/customerTrans/1a312185385ed395053961ac2d0e9381/61ef6716-18e739c69b4-0004-96e2-c7c-01ba6.mp4'
    }
    console.log(this.videoSrc)
    if (window.location.href.split('?')[1]) {
      this.rideBarMsgId = window.location.href.split('?')[1].split('=')[1]
      // this.getCalRankingV2()
      // this.rankingRideDays()
      // this.getTotalCal()

      this.listScrollMessage()
      this.getData() // 3秒钟请求一次
      this.getScrollMessage() // 1分钟请求一次
    } else {
      return this.$message.error('网址输入错误，请传入参数rideBarMsgId')
    }
  },
  mounted() {
    // 获取file input元素
    const fileInput = this.$refs.fileInput;
    // 添加事件监听器
    fileInput.addEventListener('change', this.handleFileChange);
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
    clearInterval(this.timer2)
    this.timer2 = null
  },
  methods: {
    generateQRCode(text, options) {
      QRCode.toDataURL(text, options)
        .then(url => {
          this.qrCodeUrl = url
        })
        .catch(err => {
          console.error(err)
        })
    },
    // 获取卡路里累计排行榜
    getCalRankingV2() {
      getCalRankingV2(this.rideBarMsgId).then(res => {
        if (res.code !== '200') {
          return this.$message.error(res.message);
        }
        this.calList = res.result
      }).catch(err => {
        return this.$message.error(err);
      })
    },
    // 获取骑行天数排行榜
    rankingRideDays() {
      rankingRideDays(this.rideBarMsgId).then(res => {
        if (res.code !== '200') {
          return this.$message.error(res.message);
        }
        this.rideDaysList = res.result
      }).catch(err => {
        return this.$message.error(err);
      })
    },
    // 根据骑行吧ID获取累计卡路里
    async getTotalCal() {
      const { code, message, result } = await getTotalCal(this.rideBarMsgId)
      if (code !== '200') {
        return this.$message.error(message);
      }
      this.actualCal = Math.floor(result / 1000)
      if (this.actualCal >= 888) {
        // 获取抽奖用户信息
        if (this.showBox === false) {
          getBlindBoxUser(this.rideBarMsgId).then(res => {
            if (res.code !== '200') {
              return this.$message.error(res.message);
            }
            this.nickname = res.result.nickname
            this.qrCodeUrl = res.result.qrCodeUrl
            this.generateQRCode(this.qrCodeUrl, {
              width: 300,
              height: 300,
              quality: 0.5, // 密度或质量
              margin: 1
            })
            this.showBox = true
            this.showBox1 = true
            setTimeout(() => {
              this.showBox1 = false
            }, 3000)
            setTimeout(async () => {
              this.showBox = false
              // 盲盒消失后
              // 上报达到888kcal通知
              // const params = { rideBarMsgId: this.rideBarMsgId, messageId: this.guid() }
              // const { code, message, result } = await uploadNotice(params)
              // if (code !== '200') {
              //   return this.$message.error(message);
              // }
            }, 30000)

          }).catch(err => {
            return this.$message.error(err);
          })
        }
      }
    },
    getData() {
      this.timer = setInterval(() => {
        this.getCalRankingV2()
        this.rankingRideDays()
        this.getTotalCal()
      }, 3000)
    },
    // 获取滚动消息
    listScrollMessage() {
      listScrollMessage(this.rideBarMsgId).then(res => {
        if (res.code !== '200') {
          return this.$message.error(res.message);
        }
        this.scrollMsg = res.result.map(item => item).join('')
      }).catch(err => {
        return this.$message.error(err);
      })
    },
    getScrollMessage() {
      this.timer2 = setInterval(() => {
        this.listScrollMessage()
      }, 60000)
    },
    // 在线播放按钮
    playOnlineVideo() {
      console.log('在线播放')
      this.$refs.videoPlayer.src = 'https://outin-232cff79690f11ec88c700163e1c8dba.oss-cn-shanghai.aliyuncs.com/customerTrans/1a312185385ed395053961ac2d0e9381/61ef6716-18e739c69b4-0004-96e2-c7c-01ba6.mp4';
      this.$refs.videoPlayer.play();
    },
    // 处理文件变化事件
    handleFileChange(event) {
      const file = event.target.files[0];
      console.log(file);
      if (file) {
        var reader = new FileReader();
        reader.onload = (e) => {
          this.$refs.videoPlayer.src = e.target.result;
          this.$refs.videoPlayer.play();
        };
        reader.readAsDataURL(file);
      }
    },
    // 进度条宽度
    progressWidth() {
      let width = (this.actualCal / 888) * 372
      if (width == 0) {
        return 0
      } else if (width < 30) {
        return 30 + 'px'
      } else if (width < 372) {
        return (this.actualCal / 888) * 372 + 'px'
      } else {
        return 372 + 'px'
      }
    },
    guid() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      }
      return (S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4())
    },
    butClick() {
      if (this.type) {
        this.btnContent = "全屏显示";
        // 取消全屏
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFulldcreen) {
          document.msExitFulldcreen()
        }
        this.type = false
      } else {
        this.btnContent = "取消全屏";
        // 全屏
        var element = document.documentElement
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFulldcreen) {
          element.msRequestFulldcreen()
        }
        this.type = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .topBox {
    position: absolute;
    top: 0;
    left: 19%;
    z-index: 999;
    .progressBar {
      position: relative;
      .bac2 {
        width: 520px;
        height: 120px;
      }
      .progress {
        position: absolute;
        height: 36px;
        top: 42px;
        left: 104px;
        background: #ff4e00;
        border-radius: 18px;
        z-index: 1;
        background: linear-gradient(to bottom, #fff22e, #fe7902);
        overflow: hidden;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.2) 75%,
            transparent 75%,
            transparent
          );
          background-size: 30px 30px;
          z-index: -1;
        }
      }
      .number {
        position: absolute;
        z-index: 2;
        height: 36px;
        line-height: 36px;
        left: 406px;
        top: 41px;
        font-size: 30px;
        color: #ffffff;
        font-weight: 800;
      }
    }
    .tips {
      font-weight: 800;
      font-size: 28px;
      color: #fce933;
    }
  }

  .videoBox {
    width: 100%;
    height: 100vh;
    position: relative;
    .videoPlayer {
      width: 100%;
      height: 100vh;
      &::-webkit-media-controls-fullscreen-button {
        display: none;
      }

      //播放按钮
      &::-webkit-media-controls-play-button {
        display: none;
      }

      // //进度条
      &::-webkit-media-controls-timeline {
        display: none;
      }

      // //观看的当前时间
      &::-webkit-media-controls-current-time-display {
        display: none;
      }

      // //剩余时间
      &::-webkit-media-controls-time-remaining-display {
        display: none;
      }

      //音量按钮
      &::-webkit-media-controls-mute-button {
        display: none;
      }

      // &::-webkit-media-controls-toggle-closed-captions-button {
      //   display: none;
      // }

      //音量的控制条
      // &::-webkit-media-controls-volume-slider {
      //   display: none;
      // }

      // //所有控件
      // &::-webkit-media-controls-enclosure {
      //   display: none;
      // }
    }
    .buttons {
      position: absolute;
      bottom: 20%;
      left: 50%;
      transform: translateX(-50%);
      .btn {
        width: 140px;
        height: 30px;
        line-height: 30px;
        border-radius: 36px;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        cursor: pointer;
        &.online-btn {
          background: #ff4c00;
          margin-right: 10px;
        }
        &.file-btn {
          font-size: 0;
          &::file-selector-button {
            width: 140px;
            height: 30px;
            line-height: 1;
            padding: 0px 10px;
            background-color: #1e9fff;
            border: 1px solid #1e9fff;
            border-radius: 36px;
            cursor: pointer;
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }
  .board {
    position: absolute;
    top: 0;
    z-index: 999;
    width: 19%;
    height: 100vh;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.1);
    .board-header {
      background: rgba(0, 0, 0, 0.1);
      height: 92px;
      padding-left: 12px;
      .board-header-title {
        color: #fff;
        font-weight: bold;
        font-size: 24px;
      }
      .board-header-arrow {
        width: 55px;
        height: 55px;
      }
    }
    .board-bar {
      padding: 0 7px 0 23px;
      .board-bar-item {
        height: 76px;
        .left {
          .rankNo {
            width: 24px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #fff;
            font-size: 20px;
            .medal {
              width: 24px;
              height: 32px;
            }
          }
          .headImgUrl {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin: 0 14px 0 6px;
            &.active1 {
              border: 2px solid #ff9900;
            }
            &.active2 {
              border: 2px solid #dbe4e9;
            }
            &.active3 {
              border: 2px solid #9d8375;
            }
          }
          .nickname {
            color: #f0f0f0;
            font-size: 20px;
            max-width: 100px;
          }
        }
        .right {
          color: #fff;
          display: flex;
          align-items: flex-end;
          .number {
            font-weight: 800;
            font-size: 24px;
          }
          .unit {
            font-size: 16px;
            margin-bottom: 4px;
          }
        }
      }
    }
    &.left-board {
      left: 0;
    }
    &.right-board {
      right: 0;
      .board-header {
        .board-header-arrow {
          transform: rotate(180deg);
        }
      }
    }
  }
  .bottomBox {
    position: absolute;
    width: 60.5%;
    left: 19.5%;
    bottom: 22px;
    z-index: 999;
    .QRBox {
      font-weight: bold;
      font-size: 20px;
      color: #ffffff;
      margin-right: 10px;
      .icon {
        width: 120px;
        height: 120px;
      }
    }
    .scroll-container {
      overflow: hidden;
      white-space: nowrap;
      font-weight: bold;
      font-size: 40px;
      color: #fce933;
      .text-scroll {
        display: inline-block;
        animation: scroll-right 20s linear infinite;
        white-space: pre;
      }

      @keyframes scroll-right {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
    }
  }
  .blindBox {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9;
    .QR {
      width: 300px;
      height: 300px;
      display: block;
      margin: 0 auto 20px;
    }
    .tips {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 32px;
      height: 59px;
      line-height: 59px;
      padding: 0 24px;
      // position: absolute;
      // bottom: 0;
      // left: 50%;
      // transform: translateX(-50%);
      font-weight: bold;
      font-size: 32px;
      color: #ffffff;
    }
  }
}
</style>
